<template>
  <div class="order_container">
    <!-- <h3>这是订单列表组件</h3> -->
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索框 -->
      <el-row>
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="pageInfo.query" clearable>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- table表格 -->
      <el-table :data="orderList" border stripe style="width: 100%">
        <!-- 索引列 -->
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="200">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格"> </el-table-column>
        <el-table-column prop="pay_status" label="是否付款">
          <!-- 数字 0 表示未付款，1表示已付款 -->
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pay_status === '0'" type="danger">
              未付款
            </el-tag>
            <el-tag v-else type="success">已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货"> </el-table-column>
        <el-table-column label="下单时间"
          ><template slot-scope="scope">{{
            scope.row.create_time | dateFormat
          }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <!-- 点击时，弹出修改地址 对话框 -->
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="openEditDialog"
            ></el-button>
            <!-- 点击时，弹出物流进度对话框 -->
            <el-button
              type="success"
              size="mini"
              icon="el-icon-location"
              @click="showProgress"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 功能最全 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pagenum"
        :page-sizes="[2, 5, 10]"
        :page-size="pageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 【编辑】按钮点击时，弹出省市联动对话框 -->
    <el-dialog
      title="修改地址"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="orderDialogClosed"
    >
      <el-form
        :model="editRuleForm"
        :rules="editRules"
        ref="editRuleRef"
        label-width="100px"
      >
        <el-form-item label="省市区/县" prop="address1">
          <el-cascader
            v-model="editRuleForm.address1"
            :options="city"
            :props="propsInfo"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="editRuleForm.address2"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 点击 绿色 的物流信息查询按钮，所弹出的对话框 -->
    <el-dialog
      title="物流进度"
      :visible.sync="progressDialogVisible"
      width="50%"
    >
      <!-- 用到时间线组件TimeLine,但是这个组件是在2.6.3版本之后才有的(发布时间为：2019-03-21) ,
    而图形界面中组件相关的代码都封装在vue-cli-plugin-element插件中，这个插件的发布时间是
    2019-1-9。因此，该版本的element ui中不包括这个时间线组件，需手动添加
    添加步骤：
    1.将时间线相关的文件拷到plugin文件夹下
    2.在element.js文件中导入Timeline和TimelineItem的js文件
    3.在本页面style标签中，以@import 的方式导入样式文件
    注意：封装的时间变量是 timestamp这个不能写成time,否则时间线上不显示时间
    -->
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in progressInfo"
          :key="index"
          :timestamp="activity.time"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>
<script>
// 导入省市区三级联动数据
import cityData from './citydata.js';
export default {
  created() {
    this.getOrderList();
  },
  data() {
    return {
      pageInfo: {
        query: '',
        pagenum: 1,
        pagesize: 5,
        // 用户id
        user_id: '',
        // 支付状态
        pay_status: '',
        // 是否发货
        is_send: '',
        // ['个人','公司']
        order_fapiao_title: '',
        // 公司名称
        order_fapiao_company: '',
        // 发票内容
        order_fapiao_content: '',
        // 发货地址
        consignee_addr: ''
      },
      // 数据总条数
      total: 0,
      // 订单数据列表
      orderList: [],
      // 编辑 按钮点击时，弹出对话框状态码
      editDialogVisible: false,
      // 绿色 物流进度查询按钮点击时，弹出对话框的状态码
      progressDialogVisible: false,
      // 表单数据源对象
      editRuleForm: {
        address1: [],
        address2: ''
      },
      // 级联选择器数据源
      city: cityData,
      // 级联选择器默认属性
      propsInfo: {
        expandTrigger: 'hover',
        label: 'label',
        value: 'value',
        children: 'children'
      },
      // 表单验证规则
      editRules: {
        address1: [
          {
            required: true,
            message: '请选择省市区/县',
            trigger: 'blur'
          }
        ],
        address2: [
          { required: true, message: '请填写详细地址', trigger: 'blur' },
          { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
        ]
      },
      // 存储物流进度信息的数组
      progressInfo: []
    };
  },
  methods: {
    // 页面打开时，获取订单列表数据
    async getOrderList() {
      const { data: res } = await this.$http.get('orders', {
        params: this.pageInfo
      });
      console.log(res);
      // 1.请求失败，返回提示
      if (res.meta.status !== 200) {
        return this.$message.error('获取订单列表失败');
      }
      // 2.请求成功，处理数据
      this.total = res.data.total;
      this.orderList = res.data.goods;
    },
    // 当前页面的事件处理函数
    handleCurrentChange(val) {
      this.pageInfo.pagenum = val;
      // 重新获取订单列表
      this.getOrderList();
    },
    // 当前页面容量的切换
    handleSizeChange(val) {
      this.pageInfo.pagesize = val;
      // 重新获取订单列表
      this.getOrderList();
    },
    // 点击 编辑 按钮，弹出对话框
    openEditDialog() {
      this.editDialogVisible = true;
    },
    // 级联选择器切换时
    handleChange() {
      console.log(this.editRuleForm.address1);
    },
    // 编辑 对话框关闭时，重置表单域事件
    orderDialogClosed() {
      // 重置表单
      this.$refs.editRuleRef.resetFields();
      // 对话框关闭时，级联选择器自动回到默认值，无须处理
      // this.editRuleForm.address1 = [];
    },
    // 绿色的 物流进度查询 按钮，点击时，弹出对话框
    async showProgress() {
      // 查看物流信息get请求
      // 请求参数id：是运单号
      // 默认的测试运单号(id)：1106975712662
      const id = 1106975712662;
      const { data: res } = await this.$http.get(`/kuaidi/${id}`);
      console.log(res.data);
      if (res.meta.status !== 200) {
        return this.$message.error('获取物流进度失败');
      }
      // 存储物流进度信息的数组
      this.progressInfo = res.data;
      this.progressDialogVisible = true;
    }
  }
};
</script>
<style lang="less" scoped>
// 注意：
// 1.也可以使用@import url('') [list media queries 媒体查询列表可选属性];
// 2.@import 引入css文件，必须放在style标签的顶部声明

@import '../../plugins/timeline/timeline.css';
@import '../../plugins/timeline-item/timeline-item.css';
.order_container {
  /* 表格上边距 */
  .el-table {
    margin-top: 15px;
  }
  /* 级联选择器的宽度,设置为块元素即可 */
  .el-cascader {
    display: block;
  }
}
</style>
